<template>
  <page-layout>
      <!-- table区域-begin -->
      <a-row :gutter="10">
        <a-col :md="leftColMd" :sm="24">
          <a-card :bordered="false">
          <vxe-grid
            id="DeptList"
            keep-source
            ref="vxeTable"
            :height="height"
            v-bind="options"
            :pagerConfig="false"
            :treeConfig="{rowField: 'id',children: 'children',reserve:true}"
            :row-config="{isCurrent:true}"
            :radio-config="{trigger:'row'}"
            @radio-change="onSelectChange"
          >
            <template #action="{ row }">
              <template>
                <a @click="handleEdit(row)" >编辑</a>
                <a-divider type="vertical" />
                <a-dropdown>
                  <a class="ant-dropdown-link">
                    更多 <a-icon type="down"/>
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;" @click="handleAdd(row)">添加下级</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;" @click="handleDetail(row)">详情</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </template>
          </vxe-grid>
          </a-card>
        </a-col>
        <a-col :md="rightColMd" :sm="24">
          <a-card :bordered="false">
            <DeptWithinUserList :deptId="currentRow.id" refs="DeptWithinUserList" />
          </a-card>
        </a-col>
      </a-row>
      <!-- table区域-end -->
      <dept-modal ref="modalForm" @ok="modalFormOk" :deptTree="dataSource"></dept-modal>
  </page-layout>
</template>

<script>
import DeptModal from './modules/DeptModal'
import PageLayout from '@/layouts/PageLayout'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import DeptWithinUserList from './modules/DeptWithinUserList'
import { getAction } from '@/services/manage'
export default {
  name: 'DeptList',
  components: {
    DeptModal,
    PageLayout,
    DeptWithinUserList
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      columns: [
        { type: 'radio', width: 40 },
        { type: 'seq', width: 80 },
        {
          title: '部门名称',
          align: 'center',
          field: 'deptName',
          treeNode: true,
          sorter: true
        },
        {
          title: '部门编码',
          align: 'center',
          field: 'deptCode'
        },
        {
          title: '部门描述',
          align: 'center',
          field: 'deptDesc'
        },
        {
          title: '部门类型',
          align: 'center',
          field: 'deptType'
        },
        {
          title: '操作',
          slots: { default: 'action' },
          align: 'center',
          width: 120
        }
      ],
      url: {
        list: '/dept/tree',
        delete: '/dept/remove/'
      },
      // 查询参数
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      toggleSearchStatus: false,
      currentRow: {}
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    leftColMd() {
      return this.selectedRowKeys.length === 0 ? 24 : 14
    },
    rightColMd() {
      return this.selectedRowKeys.length === 0 ? 0 : 10
    }
  },
  methods: {
    handleAdd({ id }) {
      if (this.loading) {
        return this.$message.warning('请列表加载完成后重试')
      }
      this.$refs.modalForm.add({ id: id })
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    onSelectChange({ row }) {
      this.selectedRowKeys = [row.deptCode]
      this.selectionRows = [row]
      this.currentRow = row
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.content || res.result
          this.ipagination.total = res.result.totalElements
        } else {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    }
  }
}
</script>

